<template>
	<joy-page class="joyPage bg-white" :fixed="true">
		<scroll-view scroll-x class="nav topnav" id="tab-bar">
		<view class="cu-bar bg-white search" id="tab-bar" >
			<view class="search-form radius">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @confirm="search" @blur="InputBlur" :adjust-position="false" type="text" placeholder="搜索好友" confirm-type="search"></input>
			</view>
			<!-- <view class="action">
				<text class="cuIcon-close"></text>
				<text>取消</text>
			</view> -->
		</view>
		</scroll-view>
		<scroll-view style="width:100%;position: absolute;bottom: 0;top: 100rpx;" scroll-y :scroll-top="scrollTop" @scroll="scrollTopFun"
		 :lower-threshold="50" :refresher-enabled="true" :refresher-threshold="100" :refresherTriggered="triggered"
		 @refresherpulling="onPulling" @refresherrefresh="onRefresh" @scrolltolower='loadMore'>
			<view id="list">
				<view v-if="!isFocus" class="cu-card case" @tap="goPage(item.id)" v-for="(item, index) in list" :key='index' :class="index=== 0 ? 'first':''">
					<firends-card :cardInfo="item"></firends-card>
				</view>
			</view>
			<reach-bottom v-if="!isFocus" info="暂无好友～"></reach-bottom>
		</scroll-view>
	</joy-page>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'
	import firendsCard from "@/components/uni-card/firendsCard.vue"
	export default {
		components: {
			firendsCard
		},
		computed: {
			...mapState(['forcedLogin']),
			...mapGetters(['hasLogin'])
		},
		data() {
			return {
				scrollComponents: '#tab-bar', // tab 容器 计算距离顶部距离使用
				scrollViewomponents: '#list', // 内容 容器 计算距离顶部距离使用
				scrollTop: 0, // scroll-view组件 距离顶部距离，点击tab时间置顶使用
				scrollLeft: 0,
				showComponent: false, // 是否显示
				top: 0, // 顶部监听事件使用
				triggered: false,
				banner: [],
				project: [],
				list: [],
				info: {
					curpage: 1,
					keywords: ''
				},
				totalPage: 1,
				isFocus: false
			}
		},
		async onLoad(query) {
			await this.$AppEntryController.main(query);
		},
		onShow(){
			if(this.hasLogin){
				this.getList(true);
			}
		},
		methods: {
			InputFocus(){
				this.isFocus = true
			},
			InputBlur(){
				this.isFocus = false
			},
			search(e){
				this.info.keywords = e.detail.value
				this.getList(true);
			},
			onPulling(e) {
				this.triggered = true
			},
			onRefresh() {
				this.getList(true)
			},
			loadMore() {
				if (this.totalPage > this.info.curpage) {
					this.$store.commit("changeIsMore", true);
					this.$store.commit("changeIsEnd", false);
					this.info.curpage++
					this.getList();
				} else {
					this.$store.commit("changeIsEnd", true);
					this.$store.commit("changeIsMore", false);
				}
			},
			scrollTopFun(e) {
				this.top = e.detail.scrollTop;
				this.getScrollTop();
			},
			// 计算距离
			getScrollTop() {
				let view = uni.createSelectorQuery().select(this.scrollComponents);
				let scrollView = uni.createSelectorQuery().select(this.scrollViewomponents);
				view.boundingClientRect(data => {
					// data.top  tab节点离页面顶部的距离为;
					if (data.top <= 0) {
						scrollView.boundingClientRect(scrollData => {
							// data.top  内容节点离页面顶部的距离为;
							if (scrollData.top >= 0) {
								this.showComponent = false;
							} else {
								this.showComponent = true;
							}
						}).exec();
					} else {
						this.showComponent = false;
					}
				}).exec();
			},
			async getList(isRefresh) {
				if (isRefresh) {
					this.info.curpage = 1
					this.list = []
					this.triggered = false
				}
				let indexInfo = await this.$apis.inviteList(this.info);
				this.totalPage = indexInfo.total_page
				this.list.push(...indexInfo.data);
				if (indexInfo.total_count === 0) {
					this.$store.commit("changeIsEmpty", true);
				} else {
					this.$store.commit("changeIsEmpty", false);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		z-index: 100;
		margin-bottom: 0;

		.block {
			width: 100%;
			height: 24rpx;
			background: rgba(246, 246, 246, 1);
		}
	}

	.cu-card {
		margin: 20rpx 0;
	}

	// .cu-card.first{
	// 	 margin-top: 114rpx;
	// }
	.cu-card.article>.cu-item .title {
		font-size: 30rpx;
		margin-bottom: 20rpx;
		-webkit-line-clamp: 1;
	}

	.cu-card.article>.cu-item .cu-content .text-content {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(100, 100, 100, 1);
		margin: 0 0 17rpx;
		line-height: 33rpx;
		-webkit-line-clamp: 3;
	}

	.cu-card.article>.cu-item .cu-content image {
		width: 300rpx;
		height: 141rpx;
	}

	.cu-card.article>.cu-item .cu-content .time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(178, 178, 178, 1);

		span {
			margin-right: 30rpx;
		}
	}

	.project {
		margin-bottom: 24rpx;
	}

	.title {
		display: flex;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(50, 50, 50, 1);
		line-height: 102rpx;
		background-color: #FFFFFF;
		padding: 4rpx 30rpx 0rpx;
		justify-content: space-between;

		.more {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 106, 0, 1);
		}
	}
</style>
